<template>
    <div class="handicap_item">
        <div class="title">{{data.name}}</div>
        <div class="handicap_body">
            <div class="list" v-for="(item,index) in data.data" :key="index" :style="index == 0 ? '' : 'margin-top: 4px;'">
                <div class="item" v-for="(item2,index2) in item.odds" :key="index2" @click="clickmatch(item2)" :style="index2 == 0 ? 'margin-right: 4px' : ''" :class="detailstate.matchdetail.match.ids == state.orderData?.match?.ids && state.orderData.list[item2.pk_odds_key] ? 'item_active' : ''">
                    <div class="name">{{item2.odds_name || item2.pk_odds_name}}</div>
                    <div class="value">{{item2.odd}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const { store, state } = inject('Sell')
const { detailstore, detailstate } = inject('detailSell')
const prosp = defineProps({
  data: Object,
})

const clickmatch = (row) => {
    store.selectMetchResult(row, detailstate.matchdetail.match)
}
</script>

<style lang="scss" scoped>
.handicap_item {
    width: calc(100% - 10px);
    min-height: 84px;
    background-color: #fafafa;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    padding: 8px;

    .title {
        height: 20px;
        font-size: 14px;
        font-weight: 600;
        color: #333;
    }

    .handicap_body {
        margin-top: 8px;
        display: flex;
        flex-direction: column;

        .list {
            display: flex;

            .item_title {
                width: 200px;
                height: 40px;
                background-color: #fff9e6;
                border: 1px solid #ebebeb;
                padding: 0 12px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #252a30;
                font-weight: 600;
            }

            .item {
                width: calc( 100% / 2);
                height: 40px;
                background-color: #fff;
                border: 1px solid #ebebeb;
                cursor: pointer;
                padding: 0 12px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .name {
                    color: #000;
                    font-weight: 600;
                }

                .value {
                    color: #f83e3e;
                    font-weight: 600;
                }
            }

            .item:hover {
                background-color: #ecf6ff;
            }
        }
    }
}

.item_active{
    background-color: #ecf6ff !important;
}
</style>